<template>
  <view class="promotion">
    <view class="content">
      <view class="title flex-center-between">
        <view class="title-left flex-center-between">
          <view class="line"></view>
          <view class="name">邀请好友</view>
        </view>
        <view @click="toRecord" class="title-right flex-center-between">
          邀请记录
          <image src="/static/images/my/icon-right.png" mode=""></image>
        </view>
      </view>
      <view style="width: 100%;">
        <canvas class="canvas" style="width: 638rpx;height:1038rpx;background: #ffffff;margin-left: 16rpx;" canvas-id="canvasID"></canvas>
      </view>
      <view @click="saveImage" class="btn">
        保存图片
      </view>
    </view>
    <view class="rule">
      <view class="title ">
        <view class="title-left flex-center-between">
          <view class="line"></view>
          <view class="name">邀请规则</view>
        </view>
      </view>
      <view class="rule-cont">
        内容描述内容描述内容描述内容描述内容描述内
        内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述
        内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述
        内容描述内容描述内容描述内容描述内容描述内
        内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述
      </view>
      <image src="" mode=""></image>
      <view :style="'height:'+safeAreaBottom+'px'"></view>
    </view>
  </view>
</template>

<script>


import api from '@/api/index.js'
export default {
  data() {
    return {
      imgUrl: '',
      statusBarHeight: 0,
      imageUrl: '',
      safeAreaBottom: uni.getStorageSync('safeAreaBottom')
    }
  },
  onReady() {
    let that = this;
    let ctx = uni.createCanvasContext('canvasID', this);

    ctx.drawImage('../../../static/images/login/phone_bg.png', 8, 8, 319, 404)
    ctx.draw(true);
    ctx.save();
    ctx.font = "bold 15px PingFang SC-Bold, PingFang SC";
    ctx.setFillStyle("#333333")
    ctx.fillText('十一月的萧邦', 24, 448);
    ctx.draw(true);
    ctx.font = "500 11px PingFang SC-Bold, PingFang SC";
    ctx.setFillStyle("#666666")
    ctx.fillText('邀请你一起加入新出行大家庭', 24, 473);
    ctx.draw(true);
    ctx.fillText('分享有趣新生活，体验精彩新车商', 24, 492);
    ctx.draw(true);
    ctx.drawImage('../../../static/images/login/phone_bg.png', 239, 436, 56, 56)
    // ctx.draw(true)
    ctx.draw(true, this.drawImage())
  },
  onLoad() {

  },
  methods: {
    drawImage() {
      let that = this;
      console.log('画布')
      setTimeout(() => {
        uni.canvasToTempFilePath({ //将canvas生成图片
          x: 0,
          y: 0,
          width: 434,
          height: 519,
          destWidth: 434, //截取canvas的宽度
          destHeight: 519, //截取canvas的高度
          quality: 1,
          canvasId: 'canvasID',
          success: (res) => {
            that.imageUrl = res.tempFilePath;
            console.log(res.tempFilePath)
          },
          fail: (err) => {
            console.log(err)
          }
        })
      }, 3000)
    },
    saveImage() {
      var _this = this;
      uni.saveImageToPhotosAlbum({
        filePath: _this.imageUrl,
        success() {
          uni.showToast({
            title: "图片已保存图片到相册",
            icon: 'none',
            duration: 2000
          })
        },
        fail() {

        }
      })
    },
    toRecord() {
      uni.navigateTo({
        url: '/pages/my/promotion/record'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.promotion {
  display: flex;
  flex-direction: column;
  align-items: center;

  .title {
    width: 100%;
    padding: 24rpx;
    box-sizing: border-box;

    &-left {
      font-size: 30rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #333333;

      .line {
        width: 6rpx;
        height: 36rpx;
        background: #6d0cf7;
        border-radius: 0rpx 4rpx 4rpx 0rpx;
        margin-right: 10rpx;
      }
    }

    &-right {
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #666666;

      image {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }

  .content {
    width: 686rpx;
    height: 1248rpx;
    background: #ffffff;
    margin-top: 24rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 16rpx;

    .btn {
      width: 454rpx;
      height: 72rpx;
      margin-top: 24rpx;
      background: #6d0cf7;
      border-radius: 106rpx 106rpx 106rpx 106rpx;
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      text-align: center;
      line-height: 72rpx;
    }
  }

  .rule {
    width: 686rpx;
    margin-top: 20rpx;
    padding-bottom: 26rpx;
    background: #ffffff;
    padding: 0 24rpx;
    display: flex;
    flex-direction: column;
    border-radius: 16rpx;

    .title {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 24rpx 0;
    }

    &-cont {
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #666666;
      line-height: 49rpx;
    }

    image {
      width: 100%;
      margin-top: 24rpx;
      background: #000;
    }
  }
}
</style>